<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>投资详情</title>
    <link type="text/css" rel="stylesheet" href="css/Public/Public.css">
    <link type="text/css" rel="stylesheet" href="css/Investment-details.css">
    <script src="js/flexible.js"></script>
    <script src="js/vue.1.0.js"></script>
</head>
<body>
<header id="header">
    <a href="my.html"><img src="./img/delivery-address/收货地址_03.gif"></a>
    <span>投资详情</span>
</header>
<section id="app">
    <ul>
        <li><span>投资记录编号</span><span>16050600019</span></li>
        <li><span>项目期限</span><span>3个月</span></li>
        <li><span>项目状态</span><span>收益中</span></li>
        <li><span>初始投资金额（元）</span><span>10000</span></li>
        <li><span>抵券金额（元）</span><span>100.00</span></li>
        <li><span>已还款（元）</span><span>300</span></li>
        <li><span>待还款（元）</span><span>900</span></li>
        <li><span>还款记录</span><span></span></li>
    </ul>
    <ul class="second-ul">
        <li><span>期数</span><span>还款日</span><span>应收</span><span>状态</span></li>
        <li v-for="item in date"><span>{{item.num}}</span><span>{{item.day}}</span><span>{{item.money}}</span><span><img :src="item.src"></span></li>
        <li><span>合计</span><span></span><span>{{all}}</span><span><img src="./img/delivery-address/投资详情02.png"></span></li>
    </ul>
</section>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            sum:0,
            date:[
                {num:'1',day:'2016/05/26',money:300,src:'./img/delivery-address/投资详情01.png'},
                {num:'2',day:'2016/06/26',money:300,src:'./img/delivery-address/投资详情02.png'},
                {num:'3',day:'2016/07/26',money:300,src:'./img/delivery-address/投资详情02.png'},
                {num:'4',day:'2016/07/26',money:300,src:'./img/delivery-address/投资详情02.png'},
                {num:'5',day:'2016/07/26',money:300,src:'./img/delivery-address/投资详情02.png'},
                {num:'还本',day:'2016/07/26',money:10000,src:'./img/delivery-address/投资详情02.png'}

            ]

        },
        computed:{
            all:function () {
                for(var i=0;i<this.date.length;i++){
                    this.sum = this.sum + this.date[i].money;
                }
                return this.sum;
            }
        }

    })
</script>
</body>

</html>